<template>
	<view class="container">
		<carHeader :title="'主页'">
		</carHeader>
		<!-- 头像 -->
		<view class="carTitle">
			<image :src="img"></image>
			<view>{{shopName}},欢迎您</view>
		</view>
<!-- 核销码 -->
		<view class="code">
			<view class="scanView">
				<view class="scan" @click="scanCodes('扫码核销')">
					<view class="imgView">
						<image src="../../static/车联网服务商家端-00主页03_slices/扫码.png"></image>
					</view>
					<view class="codeText">扫码核销</view>
				</view>
			</view>
			<view class="inputView">
				<view class="scan" @click="scanCodes('核销码核销')">
					<view class="imgView">
						<image src="../../static/车联网服务商家端-00主页03_slices/输入2.png"></image>
					</view>
					<view class="codeText">输入核销码</view>
				</view>
			</view>
		</view>
		<!-- 主页功能 -->
		<view class="item">
			<view class="itemView">
				<view class="itemBG1" @click="scanCodes('经营统计')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/统计.png"></image>
					</view>
					<view class="itemText">经营统计</view>
				</view>
				<view class="itemBG2" @click="scanCodes('核销记录')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/核销记录 (1).png"></image>
					</view>
					<view class="itemText">核销记录</view>
				</view>
				<view class="itemBG3" @click="scanCodes('收支明细')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/123收支明细.png"></image>
					</view>
					<view class="itemText">收支明细</view>
				</view>
				<view class="itemBG4" @click="scanCodes('订单管理')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/订单管理.png"></image>
					</view>
					<view class="itemText">订单管理</view>
				</view>
			</view>
			<view class="itemView">
				<view class="itemBG5" @click="scanCodes('卡券管理')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/卡券.png"></image>
					</view>
					<view class="itemText">卡券管理</view>
				</view>
				<view class="itemBG6" @click="scanCodes('维修任务')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/维修.png"></image>
					</view>
					<view class="itemText">维修任务</view>
				</view>
				<view class="itemBG7" @click="scanCodes('评价管理')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/评价管理.png"></image>
					</view>
					<view class="itemText">评价管理</view>
				</view>
				<view class="itemBG8" @click="scanCodes('商户资料')">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/资料库.png"></image>
					</view>
					<view class="itemText">商户资料</view>
				</view>
			</view>
			<view class="itemBG9" @click="scanCodes('活动发布')">
				<view class="photoView">
					<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/活动.png"></image>
				</view>
				<view class="itemText">活动发布</view>
			</view>

	</view>
<!-- 最新通知 -->
	<view class="advise">
		<view class="adviseHeader">
			<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/消息-信息.png"></image>
		    <text>最新通知</text>
			<text>今日需上门取车任务共{{num}}单 ></text>
		</view>
		<!-- 项目表单 -->
		<view class="itemForm">
			<view class="formTitle">
				<view>
					用户
				</view>
				<view>
		           服务项目
				</view>
				<view class="aa">
					时间
				</view>
			</view>
			<view class="record">
				
				<view class="recordItem" v-for="order in orderList" :key="id">
					<view>
					   {{order.userName}}
					</view>
					<view>
					    {{order.serviceDetails.name}}
					</view>
					<view>
						 {{order.orderTime}}
					</view>
				</view>
				
			</view>
		</view>
	</view>

</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
				shopName: null,
				img:null,
				orderList:[],
				num:null,
        routerUrl: [{
          name: "扫码核销",
          url: "/pages/scanCodes/scanCodes"
        },
          {
            name: "核销码核销",
            url: "/pages/hexiao1/hexiao1"
          },
          {
            name: "经营统计",
            url: "/pages/Businessstatistics/Businessstatistics"
          },
          {
            name: "核销记录",
            url: "/pages/Writeoffrecords/Writeoffrecords"
          },
          {
            name: "收支明细",
            url: "/pages/consume/consume"
          },
          {
            name: "订单管理",
            url: "/pages/orders/orders"
          },
          {
            name: "卡券管理",
            url: "/pages/cardmanagement/cardmanagement"
          },
          {
            name: "维修任务",
            url: "/pages/repairTasks/repairTasks"
          },
          {
            name: "评价管理",
            url: "/pages/assesManage/assesManage"
          },
          {
            name: "商户资料",
            url: "/pages/shopUser/shopUser"
          },
          {
            name: "活动发布",
            url: "/pages/activityAnnounce/activityAnnounce"
          }
        ],
			};
		},
		methods: {
			scanCodes(name) {
				let toUrl = '';
				for (let i = 0; i < this.routerUrl.length; i++) {
					if ((this.routerUrl[i].name) === (name)) {
						toUrl = this.routerUrl[i].url;
					}
				}
				console.log(toUrl);
				uni.navigateTo({
					url: toUrl
				})
			}
		},
		onLoad() {
			const that = this;
			//向后端传递token并获取商家详细信息
			uni.request({
				url:"http://localhost:8080/carShop/getInfo",
				// method:"GET",
				success(res) {
					console.log("成功获取商户信息");
					console.log(res);
					// console.log(res.data.data);
					let shop=res.data.data;
					// console.log(shop.merchantName);
					that.shopName = shop.merchantName;
					that.img = shop.merchantImgs.img;
				},
				fail: (res) => {
					console.log("获取商户信息失败");
				}
			}),
			uni.request({
				url:"http://localhost:8080/carShop/getOrder",
				method:"GET",
				success(res) {
					console.log(res);
					console.log(res.data.total);
					that.orderList=res.data.rows;
					that.num =res.data.total;
					
				}
			})
			
			
		}
	}
</script>

<style lang="scss">
.code{
	position: absolute;
	background-color: #FFFFFF;
	width: 95%;
	height: 300rpx;
	top: 250rpx;
	border-radius: 50rpx;
	margin: 0 20rpx 0 20rpx;
	z-index: 1;
}
.carTitle{
	position: absolute;
	top: 60rpx;
	left:40rpx
}
.carTitle image{
		width: 150rpx;
		height: 150rpx;
		border: 10rpx solid #5498FB;
		border-radius: 90rpx;
	}

	.carTitle view {
		position: relative;
		color: white;
		font-size: 35rpx;
		top: -120rpx;
		left: 190rpx;
	}

	.code image {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.scanView {
		width: 47.5%;
		border-right: 5rpx solid #DBDBDB;
		margin: 60rpx 0 80rpx 0;
	}

	.scan {
		width: 150rpx;
		margin: auto;
	}

	.imgView {
		width: 110rpx;
		margin: auto;
	}

	.codeText {
		font-size: 30rpx;
		margin-top: 25rpx;
		text-align: center;
	}

	.inputView {
		position: relative;
		top: -260rpx;
		left: 350rpx;
		width: 47.5%;
		margin: 60rpx 0 80rpx 0;
	}

	.item {
		background-color: #FFFFFF;
		width: 95%;
		height: 660rpx;
		border-radius: 50rpx;
		margin: 235rpx 20rpx 0 20rpx;
		z-index: 1;
	}

	.itemView {
		display: flex;
		justify-content: space-around;
		padding-top: 60rpx;
	}

	.itemView>view {
		width: 125rpx;
		height: 125rpx;
		border-radius: 90rpx;
	}

	.itemView .itemBG1 {
		background-color: #19C9FF;
	}

	.itemView .itemBG2 {
		background-color: #FF9046;
	}

	.itemView .itemBG3 {
		background-color: #5F9BFF;
	}

	.itemView .itemBG4 {
		background-color: #FFA900;
	}

	.itemView .itemBG5 {
		background-color: #5896FF;
	}

	.itemView .itemBG6 {
		background-color: #00E1A3;
	}

	.itemView .itemBG7 {
		background-color: #FD6363;
	}

	.itemView .itemBG8 {
		background-color: #12BAFF;
	}

	.itemBG9 {
		width: 125rpx;
		height: 125rpx;
		border-radius: 90rpx;
		margin: 60rpx 0 0 25rpx;
		background-color: #FF9548;
	}

	.itemPhoto {
		width: 75rpx;
		height: 75rpx;
		margin: 25rpx;
	}

	.advise {
		background-color: #FFFFFF;
		width: 95%;
		height: 650rpx;
		border-radius: 50rpx;
		margin: 25rpx 20rpx 0 20rpx;
	}

	.adviseHeader {
		position: relative;
		top: 10rpx;
		width: 95%;
		height: 100rpx;
		margin: 0 20rpx 0 20rpx;
		border-bottom: 10rpx solid #F7F7F7;
	}

	.adviseHeader image {
		position: relative;
		top: 10rpx;
		left: -10rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.adviseHeader>text:first-of-type {
		position: relative;
		top: -25rpx;
		left: -20rpx;
		font-size: 40rpx;
		line-height: 80rpx;
	}

	.adviseHeader>text:last-of-type {
		position: relative;
		font-size: 30rpx;
		line-height: 80rpx;
		top: -25rpx;
		right: -20rpx;
		color: #FF7956;
	}

	.itemForm {
		width: 95%;
		margin: 40rpx 20rpx 0 20rpx;
		height: 200rpx;
	}

	.formTitle {
		display: flex;
		justify-content: space-around;
	}

	.formTitle view {
		font-size: 35rpx;
	}

	.record {
		margin: 30rpx 20rpx 0 20rpx;
	}

	.recordItem {
		display: flex;
		justify-content: space-around;
		border-bottom: 5rpx solid #F7F7F7;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.recordItem view {
		font-size: 25rpx;
		color: #949494;
	}

	.itemText {
		font-size: 30rpx;
	}
</style>
